<template>
  <div class="songuser">
    <div class="banner">
      <van-image
        fit="contain"
        :src="songUser.cover"
        class="user-img"
        @click="
          $router.push({
            path: '/songUserXiang',
            query: { id: $route.query.id }
          })
        "
      />
      <van-icon name="arrow-left" class="icon" @click="$router.go(-1)" />
      <div class="box-name">
        <van-cell-group>
          <van-cell :title="songUser.name" label="粉丝" />
        </van-cell-group>
      </div>
    </div>
    <van-cell title="热门50首" value="内容" />
    <van-cell
      :title="item.name"
      v-for="(item, index) in songList"
      :key="index"
      :label="item.al.name"
      @click="$router.push({ path: '/play', query: { id: item.id } })"
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon name="play-circle-o" class="search-icon" />
      </template>
    </van-cell>
  </div>
</template>

<script>
import { songDan, songXiang } from './songuser'
export default {
  name: 'songuser',
  data () {
    return {
      songList: [], // 歌曲列表
      songUser: [] // 歌手详情
    }
  },
  async created () {
    let resUser = await songXiang({ id: this.$route.query.id })
    console.log(resUser)
    this.songUser = resUser.data.data.artist
    let res = await songDan({ id: this.$route.query.id })
    console.log(res)
    this.songList = res.data.hotSongs
  }
}
</script>

<style scoped>
.box {
  display: flex;
}
.user-img img {
  height: 150px;
  width: 100%;
}
.box-name p {
  margin: 0 16px;
}
.icon {
  position: absolute;
  top: 12px;
  left: 12px;
}
</style>
